<template>
  <div class="app-container">
    <h1>Vue3响应式API教程</h1>
    <p>欢迎来到Vue3响应式系统学习之旅！</p>
    <div class="tutorial-links">
      <h2>教程章节</h2>
      <ul>
        <li><a href="#level-1-ref">第一章：ref 魔法师入门</a></li>
        <li><a href="#level-2-reactive">第二章：reactive 变形术</a></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
.app-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

h1 {
  color: #42b883;
  text-align: center;
}

.tutorial-links {
  margin-top: 30px;
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
}

.tutorial-links ul {
  list-style-type: none;
  padding: 0;
}

.tutorial-links li {
  margin: 10px 0;
  padding: 10px;
  background-color: white;
  border-radius: 4px;
  transition: transform 0.2s;
}

.tutorial-links li:hover {
  transform: translateX(5px);
}

.tutorial-links a {
  color: #35495e;
  text-decoration: none;
}

.tutorial-links a:hover {
  color: #42b883;
}
</style>